<template>
  <Frame>
    <template #main>
      <PageCard id="pageCard" title="我的会议">
        <div id="body">
          <el-calendar id="calendar" v-model="date">
            <template #date-cell="{ data }">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
              <div v-for="day in conferenceDay" :key="day">
                <span v-if="day == data.day.split('-').reverse()[0]" style="color: red; font-size: 18px;">*</span>
              </div>
            </template>
          </el-calendar>
          <el-table :data="conferenceList" id="table">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="operation" label="操作" width="130" >
              <template #default="scope">
                <el-button
                  size="small"
                  @click="this.editConferenceId = scope.row.id; editConferenceVisible = true"
                >
                  {{ isAdmin == "true" ? "查看/编辑" : "查看" }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </PageCard>
    </template>
  </Frame>

  <!--编辑会议弹窗（务必关闭时销毁元素）-->
  <el-dialog title="查看会议信息" v-model="editConferenceVisible" width="60vw" @closed="reload" destroy-on-close>
    <EditConference :editConferenceId = "editConferenceId" />
  </el-dialog>
</template>

<script>
import axios from "axios";
import Frame from "../components/frame.vue";
import PageCard from "../components/pageCard.vue";
import { baseUrl } from "../main.js";
import EditConference from "../components/editConference.vue"
import { show_success_msg, show_error_msg } from "../js/msg.js";

export default {
  components: {
    Frame,
    PageCard,
    EditConference
  },
  data() {
    return {
      baseUrl: baseUrl,
      date: new Date(),
      conferenceDay: [], // 哪几天有会
      conferenceList: [],
      editConferenceVisible: false,
      editConferenceId: "",
      isAdmin: localStorage.getItem("admin"),
    };
  },
  

  methods: {
    getConferenceDay() {
      var date = this.date
      var year =  date.getFullYear()
      var month =  date.getMonth() + 1
      // console.log(month)
      axios
          .get(this.baseUrl +
              "/Conference/getUsersHaveConferenceDaysByMonth?userId=" + 
              localStorage.getItem("userId") + "&year=" + year + "&month=" + month
          )
          .then((response) => {
              let re_data = response.data;
              if (re_data.status == 200) {
                  this.conferenceDay = re_data.data;
              } else {
                  show_error_msg("获取日期失败", re_data.msg);
              }
          })
          .catch((error) => {
              show_error_msg("获取日期失败", "无法与服务建立连接");
          });
    },

    getconferenceList() {
      var date = this.date
      var year =  date.getFullYear()
      var month =  date.getMonth() + 1
      var day = date.getDate()
      // console.log(day)
      axios
          .get(this.baseUrl +
              "/Conference/getUserConferenceByDay?userId=" + 
              localStorage.getItem("userId") + "&year=" + year + "&month=" + month + "&day=" + day
          )
          .then((response) => {
              let re_data = response.data;
              if (re_data.status == 200) {
                  this.conferenceList = re_data.data;
              } else {
                  show_error_msg("获取会议失败", re_data.msg);
              }
          })
          .catch((error) => {
              show_error_msg("获取会议失败", "无法与服务建立连接");
          });
    },
    reload() {
      this.getConferenceDay()
      this.getconferenceList()
    }
  },
  watch: {
    date() {
      this.getConferenceDay()
      this.getconferenceList()
    }
  },
  mounted() {
    this.getConferenceDay()
    this.getconferenceList()
  },
};
</script>
<style scoped>
#body {
  /* background-color: aquamarine; */
  margin-top: 2vh;
  height: 88%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#table {
  width: 45%;
  margin-left: 1vw;
  height: 95%;
  border-radius: 7px;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
}

#calendar {
  width: 55%;
  height: 95%;
  border-radius: 7px;
  box-shadow: 2px 1px 7px rgb(88, 88, 88, 0.2);
  --el-calendar-cell-width: 4.5vw;
  font-size: 2.5vh;
}
</style>